<template>
  <div class="haruyuki-mb-40">
    <el-form
      :model="rateForm"
      :rules="rateRules"
      ref="rateForm"
      size="small"
    >
     <div class="alter-basic">
       <div class="row-alter alter-width-4x">
        <div class="col-alter border-bottom">
          <span class="alter-title">支付类型</span>
        </div>
        <div class="col-alter">微信支付</div>
        <div class="col-alter">支付宝支付</div>
        <div class="col-alter">银联云闪付支付</div>
        <div class="col-alter">银联云闪付支付</div>
        <div class="col-alter">银联云闪付支付</div>
        <div class="col-alter">银联云闪付支付</div>
        <div class="col-alter">银联云闪付支付</div>
        <div class="col-alter">垫资费费率</div>
      </div>
      <div class="row-alter alter-width-4x">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更内容</span>
        </div>
        <div class="col-alter">微信扫码</div>
        <div class="col-alter">支付宝扫码</div>
        <div class="col-alter">1000元以下借记卡费率</div>
        <div class="col-alter">1000元以下贷记卡费率</div>
        <div class="col-alter">1000元以上贷记卡费率</div>
        <div class="col-alter">1000元以上借记卡费率</div>
        <div class="col-alter">1000元以上借记卡封顶</div>
        <div class="col-alter">垫资费费率</div>
     </div>
     <div class="row-alter alter-width-4x">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更前内容</span>
        </div>
        <div class="col-alter">{{ oldRateForm.wechatSignRate }}</div>
        <div class="col-alter">{{ oldRateForm.alipaySignRate }}</div>
        <div class="col-alter">{{ oldRateForm.debitRate2 }}</div>
        <div class="col-alter">{{ oldRateForm.creditRate2 }}</div>
        <div class="col-alter">{{ oldRateForm.creditRate1 }}</div>
        <div class="col-alter">{{ oldRateForm.debitRate1 }}</div>
        <div class="col-alter">{{ oldRateForm.debitMax1 }}</div>
        <div class="col-alter">{{ oldRateForm.codeAdvanceRate }}</div>
     </div>
     <div class="row-alter alter-width-4x">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更后内容</span>
        </div>
        <div class="col-alter margin-top">
          <el-form-item label="" label-width="0" prop="wechatSignRate">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.wechatSignRate"
                :precision="4"
                :step="0.0001"
                :min="rateForm.wechatSignRate"
                :max="1"
                @keyup.native="proving($event, rateForm.wechatSignRate)"
            ></el-input>
                <!-- @change="changeInput($event, rateForm.codeAdvanceRatePlus)" -->
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="alipaySignRate">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.alipaySignRate"
                :precision="4"
                :step="0.0001"
                :min="rateForm.alipaySignRate"
                :max="1"
                @keyup.native="proving($event, rateForm.alipaySignRate)"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="debitRate2">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.debitRate2"
                :precision="4"
                :step="0.0001"
                :min="rateForm.debitRate2"
                :max="1"
                @keyup.native="proving($event, rateForm.debitRate2)"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="creditRate2">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.creditRate2"
                :precision="4"
                :step="0.0001"
                :min="rateForm.creditRate2"
                :max="1"
                @keyup.native="proving($event, rateForm.creditRate2)"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="creditRate1">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.creditRate1"
                :precision="4"
                :step="0.0001"
                :min="rateForm.creditRate1"
                :max="1"
                @keyup.native="proving($event, rateForm.creditRate1)"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="debitRate1">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.debitRate1"
                :precision="4"
                :step="0.0001"
                :min="rateForm.debitRate1"
                :max="1"
                @keyup.native="proving($event, rateForm.debitRate1)"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="debitMax1">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.debitMax1"
                @keyup.native="numberProving($event)"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="codeAdvanceRate">
            <el-input
                class="haruyuki-width-100"
                v-model="rateForm.codeAdvanceRate"
                @keyup.native="numberProving($event)"
            ></el-input>
          </el-form-item>
        </div>
      </div>
     </div>
    </el-form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            rateRules: {
                wechatSignRate: [
                 { required: true, message: "请输入微信扫码费率", trigger: "blur" },
                ],
                alipaySignRate: [
                 { required: true, message: "请输入支付宝扫码费率", trigger: "blur" },
                ],
                debitRate2: [
                 { required: true, message: "请输入1000元以下借记卡费率", trigger: "blur" },
                ],
                creditRate2: [
                 { required: true, message: "请输入1000元以下贷记卡费率", trigger: "blur" },
                ],
                creditRate1: [
                 { required: true, message: "请输入1000元以上贷记卡费率", trigger: "blur" },
                ],
                debitRate1: [
                 { required: true, message: "请输入1000元以上借记卡费率", trigger: "blur" },
                ],
                debitMax1: [
                 { required: true, message: "请输入1000元以上借记卡封顶", trigger: "blur" },
                ],
                codeAdvanceRate: [
                 { required: true, message: "请输入垫资费费率", trigger: "blur" },
                ]
            }
        }
    },
    props: {
        rateForm: {
          type: Object,
          default: () => {
            return {}
          }
        },
        oldRateForm: {
          type: Object,
          default: () => {
            return {}
          }
        },
    },
    methods: {
        /* 扫码费率 input */
        changeInput(value, min) {
            if (value < min) {
                value = min;
            }
        },
        /* input 数值检验 */
        proving(e, min) {
            var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
            // var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
            if (keynum == 189 || keynum == 109) { //禁止输入负数
                e.target.value = min || 0
            }
            // if (e.target.value.indexOf('.') == 1) { //如果值里面有’.‘的话，进去检测位小数点大于1位的话只保留一位
            //     var x = String(e.target.value).indexOf(".")+4;//得到小数点的位置
            //     var y = String(e.target.value).length - x;//小数点的位数
            //     if(y > 1){
            //         e.target.value = this.getBit(e.target.value, 4)
            //     }
            // }
            if (e.target.value.indexOf(".") != -1) {
                e.target.value = e.target.value.replace(/\.{2,}/g, '.')
                if (e.target.value.length > 6) {
                e.target.value = e.target.value.substr(0, e.target.value.length - 1)
                }
            }
            if (e.target.value > 1) {
                e.target.value = 1
            }
        },
        /* input 金额数值检验 */
        numberProving(e) {
            var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
            // var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
            if (keynum == 189 || keynum == 109) { //禁止输入负数
                e.target.value = 0
            }
            if (e.target.value.indexOf(".") != -1) {
                e.target.value = e.target.value.replace(/\.{2,}/g, '.')
                if (e.target.value.length > 6) {
                e.target.value = e.target.value.substr(0, e.target.value.length - 1)
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.alter-basic {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #EBEEF5;

  .alter-title {
    font-weight: bold;
    color: rgba(0, 0, 0, .85);
  }
}

.row-alter {
  display: flex;
  flex-direction: column;
  &.alter-width-4x {
    width: calc(99.70% / 4);
  }
  // &::after, &::before {
  //   display: table;
  // }
  &:nth-child(1) {
    color: #485563;
    font-weight: bold;
  }
  &:nth-child(n+2) {
    border-left: 1px solid #EBEEF5;
  }
}

.col-alter {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 46px;
  height: 46px;
  margin-bottom: 6px;
  font-size: 14px;
  &.border-bottom {
    border-bottom: 1px solid #EBEEF5;
    word-break: break-word;
    background-color: #fafafa;
  }
  &.margin-top {
    margin-top: 6px;
  }
}
</style>